<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<%
String value = (String) session.getAttribute("value");
%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        
        #div_left{
            width: 300px;
            height:600px;
            margin-top: 107px;
            position: fixed;
            z-index:10;
            top: 0;
            border: dashed;
        }
        #div_collections,#div_apis,#div_environments,#div_history{
            width:119px ;
            height: 60px;
            line-height: 60px;
            background-color: aqua;
            border:none;
        }
        #div_collections:hover{
            background-color: rgba(0, 0, 255, 0.694);
            border: none;
        }
        #div_apis:hover{
            background-color: rgba(0, 0, 255, 0.694);
            border: none;
        }
        #div_environments:hover{
            background-color: rgba(0, 0, 255, 0.694);
            border: none;
        }
        #div_history:hover{
            background-color: rgba(0, 0, 255, 0.694);
            border: none;
        }
        #buttons{
            width:120px ;
            height: 600px;
            line-height: 60px;
            background-color: aqua;
        }
        #div_details{
            width: 170px;
            height: 100%;
            /* float: left; */
            overflow: hidden;
            margin-left: 125px;
            margin-top: 0;
        }
        img{
            margin-top: 30px;
            margin-left: 30px;
        }
        a{
            text-align: center;
            font-weight:bold;
            text-decoration: none;
        }
        #div_url{
            flex: 1;
            width: 100%;
            padding-left: 320px;
            padding-top: 30px;
            padding-right: 50px;
            position:fixed;
        }
        #skills{
            width: 90px;
            height: 30px;
            background-color: gainsboro;
            position:fixed;
        }
        #input_url{
            width: 630px;
            height: 26px;
            margin-left:90px;
        }
        #input_search{
            width: 595px;
            height: 25px;
            margin-left: 75px;
            position:fixed;
        }
        #button_send{
            width: 70px;
            height: 30px;
            background-color: rgb(78, 215, 169);
        }
        #create{
            color: rgb(45, 120, 240);
        }
        a{
            color:black;
            margin-right: 20px;
        }
        #as{
            margin-top: -280px;
            color: rgba(0, 0, 0, 0.688);
        }
        #file{
            width: 300px;
            height: 40px;
            margin-top: -50px;
            position:fixed;
        }
        a:hover{
            text-decoration: none;
        }
        #more{
            width: 700px;
            height: auto;
            margin-left: 300px;
            text-align: center;
            /* line-height: 400px; */
            margin-top:70px;
            position:fixed;
        }
        #table{
            width: 825px;
            margin-left: 20px;
            margin-top: 20px;
            position:fixed;
        }
        #div_right{
            margin-right: 0;
            margin-left: 1300px;
            padding-right: 0;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .caidan{
            width: 100px;
            height: 300px;
            margin-top: 40px;
            margin-left: 1250px;
        }
        .little_caidan{
        	width:90px;
        	border-top:1px dashed;
        	
        }
        .two{
        	border-bottom:1px dashed;
        }
        #total{
          position: relative;
          z-index:20;
        }
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    position: relative;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
.btn_change_color{
	background-color:pink;
}

        
</style>


</head>
<body>

    <script type="text/javascript">
    
    window.onload=function(){
        var btn0 = document.getElementsByClassName("btna")[0];
        var btn1 = document.getElementsByClassName("btnb")[0];
        var btn2 = document.getElementsByClassName("btnc")[0];
        var btn3 = document.getElementsByClassName("btnd")[0];
        var btn4 = document.getElementsByClassName("btne")[0];
        var btn5 = document.getElementsByClassName("btnf")[0];
        var btn6 = document.getElementsByClassName("btng")[0];
        var btn7 = document.getElementsByClassName("btnh")[0];
        var btn8 = document.getElementsByClassName("btni")[0];
        var count = 0;
        btn0.onclick=function(){
            count++;
            if(count%2==1){
                btn0.style.backgroundColor="gainsboro";
            }else{
                btn0.style.backgroundColor="white";
            }
        }
        btn1.onclick=function(){
            count++;
            if(count%2==1){
                btn1.style.backgroundColor="white";
            }else{
                btn1.style.backgroundColor="gainsboro";
            }
        }
        btn2.onclick=function(){
            count++;
            if(count%2==1){
                btn2.style.backgroundColor="gainsboro";
            }else{
                btn2.style.backgroundColor="white";
            }
        }    
        btn3.onclick=function(){
            count++;
            if(count%2==1){
                btn3.style.backgroundColor="white";
            }else{
                btn3.style.backgroundColor="gainsboro";
            }
        }    
        btn4.onclick=function(){
            count++;
            if(count%2==1){
                btn4.style.backgroundColor="gainsboro";
            }else{
                btn4.style.backgroundColor="white";
            }
        } 
        btn5.onclick=function(){
            count++;
            if(count%2==1){
                btn5.style.backgroundColor="white";
            }else{
                btn5.style.backgroundColor="gainsboro";
            }
        }   
        btn6.onclick=function(){
            count++;
            if(count%2==1){
                btn6.style.backgroundColor="gainsboro";
            }else{
                btn6.style.backgroundColor="white";
            }
        }  
        btn7.onclick=function(){
            count++;
            if(count%2==1){
                btn7.style.backgroundColor="white";
            }else{
                btn7.style.backgroundColor="gainsboro";
            }
        }  
        btn8.onclick=function(){
            count++;
            if(count%2==1){
                btn8.style.backgroundColor="gainsboro";
            }else{
                btn8.style.backgroundColor="white";
            }
        }  
              
    }
    
    function getParameter(url){
    	var reg = new RegExp("(^|&)"+url+"=([^&]*)(&|$)");
    	var r = window.location.search.substr(1).match(reg);
    	if(r != null){
    		if(unescape(r[2])=="null"){
    			return "";
    			return unescape(r[2]);
    		}else{
    			return "";
    		}
    	}
    }
    var url = getParamter("input_url");
        
    </script>

    <div id="total">
        <div class="dropdown">
          <button class="dropbtn">File</button>
          <div class="dropdown-content">
            <a href="#">New</a>
                <a href="#">New Tab</a>
                <a href="#">New Runner Tab</a>
                <a href="#">New Windows</a>
                <a href="#">Import..</a>
                <a href="#">Settings</a>
                <a href="#">Close Windows</a>
                <a href="#">Close Tab</a>
                <a href="#">Exit</a>
          </div>
        </div>
        
        <div class="dropdown">
            <button class="dropbtn">Edit</button>
            <div class="dropdown-content">
              <a href="#">Cut</a>
                  <a href="#">Copy</a>
                  <a href="#">Paste</a>
                  <a href="#">Delete</a>
                  <a href="#">Select All</a>
            </div>
          </div>
          <div class="dropdown">
            <button class="dropbtn">View</button>
            <div class="dropdown-content">
              <a href="#">Full Screen</a>
                  <a href="#">Zoom in</a>
                  <a href="#">Zoom out</a>
                  <a href="#">Reset Zoom</a>
                  <a href="#">Toggle Sidebar</a>
                  <a href="#">Toggle Two-Pane View</a>
                  <a href="#">Next Tab</a>
                  <a href="#">Previous Tab</a>
                  <a href="#">Show Console</a>
                  <a href="#">Developer</a>
            </div>
          </div>
          <div class="dropdown">
            <button class="dropbtn">Help</button>
            <div class="dropdown-content">
              <a href="#">Check for Updates</a>
                  <a href="#">Hardware Acceleration</a>
                  <a href="#">Documentation</a>
                  <a href="https://gitee.com/">GitHub</a>
                  <a href="#">Twitter</a>
                  <a href="#">Support</a>
            </div>
          </div>
      </div>
      
        
    <div class="caidan">
            <div class="little_caidan" style="margin-top: -50px;">
                <a href="post_gitee01.jsp">返回</a>  
            </div>
            <div class="little_caidan" style="margin-top: 5px;">
                <a href="person.jsp">个人中心</a>
            </div>
            <div class="little_caidan" style="margin-top: 5px;">
                <a href="login.jsp">退出</a>
            </div>
            <div class="little_caidan two" style="margin-top: 5px;">
                <a href="register.jsp">设置</a>
            </div>
        </div>
        
        <div id="as">
            <a href="">Home</a>
            <a href="">Workspace</a>
            <select name="" id="">
                
            </select>
            <a href="">Reports</a>
            <a href="">Explpre</a>
            <div style="margin-left:367px; margin-top:-20px"><input type="text" id="input_search" placeholder="Search LittleSeven"></div>
            <button style="width: 60px; height: 30px;margin-left:1050px">
                Search
            </button>
        </div>
        <!-- <div id="div_right">
    
        </div> -->
        <div>
            <input style="width: 725px; height: 30px; margin-left: 320px; margin-top: 30px;" placeholder="Request Name">
            <button style="width: 68px; height: 35px;">
                Save
            </button>
        </div>
        
        <div id="div_left">
            <div id="buttons">
                <button id="div_collections">
                    Collections
                </button><br>
                <button id="div_apis">
                    APIs
                </button><br>
                <button id="div_environments">
                    Environments
                </button><br>
                <button id="div_history">
                    History
                </button><br>
            </div>
            
        </div>
       
        <div id="div_url">
            <select id="skills" name="skills">
                <option value="get">GET</option>
                <option value="post">POST</option>
                <option value="put">PUT</option>
                <option value="patch">PATCH</option>
                <option value="delete">DELETE</option>
                <option value="copy">COPY</option>
                <option value="head">HEAD</option>
                <option value="options">OPTIONS</option>
                <option value="link">LINK</option>
                <option value="unlink">UNLINK</option>
                <option value="lock">LOCK</option>
                <option value="unlock">UNLOCK</option>
                <option value="propfind">PROPFIND</option>
                <option value="view">VIEW</option>
            </select>
            <input id="input_url" placeholder="Enter request URL" value="https://www.jd.com/?source=enterprise&cu=true&utm_source=kong&utm_medium=jingfen&utm_campaign=t_2030767747_&utm_term=a3634ba70d6f40af94f5612fe1852caa">
            <button id="button_send">
                Send
            </button>
    
        </div>
        
    	
    	
        <div id="more">
            <table id="table" border="1">
                <tr>
                    <th></th>
                    <th>Key</th>
                    <th>Value</th>
                    <th>DESCRIPTION</th>
                    <th>。。</th>
                    <th>Bulk Edit</th>
                </tr>
                <tr>
                    <td><button class="btn_change_color">√</button></td>
                    <td><input type="text" placeholder="Key" value="source"></td>
                    <td><input type="text" placeholder="Value" value="enterprise"></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                </tr>
                <tr>
                    <td><button class="btn_change_color" onclick="changeColor()">√</button></td>
                    <td><input type="text" placeholder="Key" value="cu"></td>
                    <td><input type="text" placeholder="Value" value="true"></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                </tr>
                <tr>
                    <td><button class="btn_change_color" onclick="changeColor()">√</button></td>
                    <td><input type="text" placeholder="Key" value="utm_source"></td>
                    <td><input type="text" placeholder="Value" value="kong"></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                </tr>
                <tr>
                    <td><button class="btn_change_color" onclick="changeColor()">√</button></td>
                    <td><input type="text" placeholder="Key" value="utm_medium"></td>
                    <td><input type="text" placeholder="Value" value="jingfen"></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                </tr>
                <tr>
                    <td><button class="btn_change_color" onclick="changeColor()">√</button></td>
                    <td><input type="text" placeholder="Key" value="utm_campaign"></td>
                    <td><input type="text" placeholder="Value" value="t_2030767747_"></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                </tr>
                <tr>
                    <td><button class="btn_change_color" onclick="changeColor()">√</button></td>
                    <td><input type="text" placeholder="Key" value="utm_term"></td>
                    <td><input type="text" placeholder="Value" value="db1ccd2119f14da8a4319188b594e67a"></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                </tr>
                <tr>
                    <td><button onclick="changeColor()">√</button></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                </tr>
                <tr>
                    <td><button onclick="changeColor()">√</button></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                </tr>
                <tr>
                    <td><button onclick="changeColor()">√</button></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                    <td><input type="text" placeholder=""></td>
                </tr>
    
            </table><br>
        </div>
    


	<script type="text/javascript">

        ! function () {

            function o(w, v, i) {

                return w.getAttribute(v) || i

            }

            function j(i) {

                return document.getElementsByTagName(i)

            }

            function l() {

                var i = j("script"),

                    w = i.length,

                    v = i[w - 1];

                return {

                    l: w,

                    z: o(v, "zIndex", -1),

                    o: o(v, "opacity", 7),

                    c: o(v, "color", "250,0,0"),

                    n: o(v, "count", 150)

                }

            }

            function k() {

                r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

            }

            function b() {

                e.clearRect(0, 0, r, n);

                var w = [f].concat(t);

                var x, v, A, B, z, y;

                t.forEach(function (i) {

                    i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);

                    for (v = 0; v < w.length; v++) {

                        x = w[v];

                        if (i !== x && null !== x.x && null !== x.y) {

                            B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;

                            y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.01 * B, i.y -= 0.01 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())

                        }

                    }

                    w.splice(w.indexOf(i), 1)

                }), m(b)

            }

            var u = document.createElement("canvas"),

                s = l(),

                c = "c_n" + s.l,

                e = u.getContext("2d"),

                r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {

                    window.setTimeout(i, 1000 / 45)

                },

                a = Math.random,

                f = {

                    x: null,

                    y: null,

                    max: 100000

                };

            u.id = c;

            u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;

            j("body")[0].appendChild(u);

            k(), window.onresize = k;

            window.onmousemove = function (i) {

                i = i || window.event, f.x = i.clientX, f.y = i.clientY

            }, window.onmouseout = function () {

                f.x = null, f.y = null

            };

            for (var t = [], p = 0; s.n > p; p++) {

                var h = a() * r,

                    g = a() * n,

                    q = 2 * a() - 1,

                    d = 2 * a() - 1;

                t.push({

                    x: h,

                    y: g,

                    xa: q,

                    ya: d,

                    max: 9000

                })

            }

            setTimeout(function () {

                b()

            }, 100)

        }();

    </script>
    
    
</body>
</html>